<template>
    <div class="demo">
        <GroupList title="游戏">
            <!-- scope="this api replaced by slot-scope in 2.5.0+" -->
            <template slot-scope="xfj">
                <ul>
                    <li v-for="(item,index) in xfj.games" :key="index">{{item}}</li>
                </ul>
            </template>
            
        </GroupList>

        <GroupList title="语言">
            <img src="./assets/logo.png" alt="">
        </GroupList>

        <GroupList title="亲戚">
            <template slot-scope="{kins}">
                <ul>
                    <li v-for="(item,index) in kins" :key="index">{{item}}</li>
                </ul>
            </template>
        </GroupList>
    </div>
</template>
<script>
    import GroupList from './components/GroupList'

    export default {
        name:'App',
        components:{
            GroupList
        },
        
    }
</script>
<style>
    .demo{
        display: flex;
        justify-content: space-around;
    }
</style>